$bold_highlight: #212121

$content_background: lighten($bold_highlight, 75%)

$panel_color: lighten($bold_highlight, 85%)
$panel2_color: lighten($content_background, 6%)

// The four colors in the dea style guide. Use sparingly (highlights).

$emphasis_strong: darken(#00A1DE, 5%)
$emphasis_weak: desaturate($emphasis_strong, 10%)

$emphasis_light: #8FCAE7

$highlight_alt: #7AB800
$highlight_alt2: #EEAF30

$header_highlight: lighten($bold_highlight, 20%)
$header_highlight_strong: lighten($bold_highlight, 25%)

$muted_text: lighten($bold_highlight, 32%)

$header_stipe1: #2dace1
$header_stripe2: #7fd0eb

// Adjust standard padding based on screen width. We can't use CSS vars due to IE support.
@mixin box_padding($scale_top:1, $scale_bottom:1)
    @media (min-width: 800px)
        padding: 15px*$scale_top 30px 15px*$scale_bottom

    padding: 10px*$scale_top 20px 10px*$scale_bottom

@mixin wide_padding
    @include box_padding(1)

@mixin square_padding
    @include box_padding(2, 2)

@mixin header_padding
    // Place a header closer to its contents below.
    @include box_padding(2, 1)

// On small screens, move the description to the info panel.
.product-description
    display: none

@media (max-width: 600px)
    .option-description
        display: none

    .product-description
        display: block

body
    font-family: Helvetica, Arial, sans-serif
    background: linear-gradient(to bottom, #bababa 90px, #e0e0e0 800px)

    min-height: calc(100vh - 50px)
    color: $bold_highlight
    font-size: 0.86em
    margin: 0 auto
    padding: 0 15px
    max-width: 1024px

html
    scrollbar-color: #95d3f4 #d4dadc

a
    color: #2b2b2b

.content-wrapper
    position: relative
    padding: 110px 0 0

// Pages with tabs: put the tabs in the margin.
header
    margin-top: -30px
    color: #efefef
    padding: 0
    display: flex
    flex-direction: row

footer
    @include square_padding
    text-align: right
    color: #a6a6a6
    font-size: 0.7em
    line-height: 2em

#content
    clear: right
    position: relative
    width: auto

    background-color: $content_background

.map-panel
    width: 100%

// Spatial page
#map
    flex: 1 1
    height: calc(100vh - 100px)
    border-top: 7px $header_stipe1 solid

// show two columns on wide displays
@media (min-width: 800px)
    .panels
        display: flex

    .info-panel
        width: 250px
        border-top: 7px $header_stripe2 solid


.info-panel
    ul
        list-style-type: none
        padding: 0
        margin: 0

h1
    line-height: 30px
    font-size: 18px
    font-weight: normal

    strong
        display: block

    color: #333

h4
    color: lighten($bold_highlight, 18%)

ul:last-child, ol:last-child
    margin-bottom: 0

.message-box
    position: absolute
    left: calc(50% - 100px)
    top: 25%
    width: 200px
    text-align: center
    z-index: 9999
    background: $header_highlight_strong
    padding: 13px 15px
    color: #fff

    a
        color: lighten($emphasis_strong, 10%)

.panel
    @include square_padding
    line-height: 1.7em
    background: $panel_color

    h1, h2, h3, h4, p
        margin: 15px 0
        &:first-child
            margin-top: 0
        &:last-child
            margin-bottom: 0

    &.odd
        background-color: $panel2_color
        border-bottom: 0

    &.highlight
        background: $header_highlight_strong
        color: #efefef
        border-bottom: 0
        > h1
            color: #fff
        a
            color: #999

.header-option
    position: relative
    border-collapse: collapse
    max-width: 60%
    vertical-align: bottom

    background-color: $header_highlight_strong

    $menu_background: $emphasis_strong
    $hover_footer_size: 0px
    $hover_footer_color: $emphasis_light

    &:hover
        background-color: lighten($header_highlight_strong, 5%)
    &.primary
        background-color: $header_highlight
        &:hover
            background-color: lighten($header_highlight, 10%)

    &.is-open
        background-color: $menu_background
        &:hover
            background-color: $menu_background

        .option-title
            &:hover
                color: #fff

        .option-menu
            background-color: $menu_background
            display: table

    .option-title
        font-size: 1em
        font-weight: normal


    .group-name
        margin: 0
        @include header_padding
        font-size: 0.8em
        color: $bold_highlight
        text-transform: lowercase


    > .option-title
        @include wide_padding
        margin: 0
        line-height: 1.75em
        flex: 1 1

        // This hints to touch devices (such as iPads) to trigger "hover" on click rather than select the text.
        cursor: pointer

        &::after
            content: ' ▾'

    ul
        margin: 0
        padding: 0
        list-style: none
        li
            margin: 0

    a.option-menu-link
        display: block
        text-decoration: none
        @include wide_padding
        color: #fcfcfc
        font-weight: bold

        &.active
            background-color: lighten($menu_background, 5%)

        &:hover
            background-color: lighten($menu_background, 10%)
            text-decoration: underline
            color: #fff

    .option-menu
        display: none
        position: absolute
        top: 100%
        left: 0

        li.empty
            opacity: 0.6

        &.left
            left: initial
            right: 0

        // Above maps etc
        z-index: 10000

        > ul
            display: table-row
            & > li
                display: table-cell

        > .footer
            @include wide_padding
    // The "All" menu items
    .wildcard
        font-weight: bold


/* Table of values

.data-table
    margin: 0 -15px 15px

    th
        font-weight: bold
        font-size: 0.8em
    td, th
        padding: 0 15px
        text-align: left
        line-height: 30px

/* lists of key-values

.query-param-list
    width: auto
    display: grid

@media (min-width: 800px)
    .query-param-list.wide
        grid-template-columns: 1fr 1fr

.query-param
    > .value
        color: $muted_text

    .value > .query-param
        margin-left: 15px

button
    margin: 5px 0
    background-color: $emphasis_weak
    border: 0
    color: #efefef
    padding: 8px
    cursor: pointer
    font-size: inherit

    &:hover
        background-color: $emphasis_strong

    &.small
        margin: 0
        font-size: 12px
        background-color: $header_highlight_strong

// Similar to gridforms style
label
    text-transform: uppercase
    letter-spacing: 1px
    font-size: 10px
    color: #333

    &.disabled
        color: #ccc

.form-footer
    margin: 1em 0
    > label
        padding: 8px
        display: block

    select
        padding: 6px

.chart-timeline
    padding: 15px

.chart-timeline-bars
    font-size: 0
    height: 50px
    white-space: nowrap

.chart-timeline-bar
    width: 2px
    display: inline-block
    $graph_highlight: $emphasis_weak
    background-color: $graph_highlight

    &.new-year
        background-color: darken($graph_highlight, 5%)
    &:hover
        background-color: darken($graph_highlight, 10%)

.chart-timeline-years
    font-size: 0
    white-space: nowrap

.chart-timeline-year
    width: 24px
    display: inline-block
    font-size: 10px
    text-align: center
    transform: rotate(45deg)
    transform-origin: top left
    vertical-align: bottom
    height: 24px

.relative
    position: relative

.muted
    color: $muted_text

.raw-metadata
    .property
        font-family: 'Courier New', monospace

        .property
            padding-left: 15px

        & > .key
            font-weight: bold

// Information box shown when hovering a map dataset
.dataset-info
    background-color: $panel2_color
    margin: 10px
    padding: 15px

.recenter-map
    margin: 0
    padding: 0

#logo
    padding-right: 25px
    position: absolute
    top: 15px
    right: 0

    img
        vertical-align: middle
        padding-right: 2px

    > a
        text-decoration: none
        color: #fff

.logo-text
    display: inline-block

@import gridforms/gridforms.sass

// Minor tweak of gridforms defaults
// Lighten borders
.grid-form

    +grid-form($grid-border-color: #777, $field-focus-color: lighten(#adb0b3, 8%))

    [data-row-span].disabled
        display: none

@import "leaflet-1.3.1/leaflet"
@import "leaflet-groupedlayercontrol/leaflet.groupedlayercontrol"
